<template>
<div class="box-container">
	<div class="show-select-all" v-if="showSelectAll">
		<div class="check-box" >
			<input type="checkbox" name="checkbox_{{checkboxName}}_showSelectAll"  id="checkbox_{{checkboxName}}_showSelectAll" v-model="picked">
			<div class="check-bg"></div>
		</div>
		<label class="check-label" for="checkbox_{{checkboxName}}_showSelectAll" >全选</label>
	</div>

	<div class="check-wrap" v-for="(index,one) in options">
		<div class="check-box" >
			<input type="checkbox" name="checkbox_{{checkboxName}}" v-model="value"  id="checkbox_{{checkboxName}}_{{index}}" value="{{one.value}}" >
			<div class="check-bg"></div>
		</div>
		<label class="check-label" for="checkbox_{{checkboxName}}_{{index}}" >{{one.text}}</label>
		<slot name="msg"></slot>
	</div>

</div>
</template>
<style lang='sass'>
	@import '../../public/css/common.scss';
	.check-wrap{
		display: inline-block;
	    width: 100%;
	    position: relative;
	}
		label{
			width: 90%;
		}
		.check-label{
			text-indent: 1rem;
			font-size: .937rem;
		}

		.check-box{
			vertical-align: top;
			margin-top: .4rem;
			width: .75rem;
			height: .75rem;
			display: inline-block;
			position: absolute;
			input{
				@include opacity(0);
				z-index: 10;
				width: 100%;
				height: 100%;
				margin: 0;
				position: relative;
				&:checked + .check-bg{
					
					background: url(../../public/images/ico_ok.png) no-repeat center #00adef;
					background-size: 0.4rem;
					box-shadow: none;
					
				}
			}
			.check-bg{
				position: absolute;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    top: 0;
				background: $bgSecondary;
				@include borderRaduis(0);
    			@include boxShadow(0px 0 0px 2px #056184 inset);
			}		}
	#collapseApp{
		.check-wrap{
			width: 100%;
		}
		.check-box{
			margin-top: .2rem;
		}
		.check-label{
			font-size: .7125rem;
			width: 94%;
			line-height: 1rem;
			text-indent: 0;
			float: right;
		}
	}
</style>
<script >
	export default{
		replace: true,
		props: {
		    options: {				//选项,必须包含value和text字段
		      type: Array,
		      required: true
		    },
		    checkboxName: {			//组名称,唯一
		    	type: String,
		        required: true
		    },
		    dataValue : {
		    	type: Array,
		    	default: () => []
		    },
		    showSelectAll  :       //是否显示全选
		    {
		    	type: Boolean,
		    	default: false
		    }
		},
		data() {
			return {
				value   : this.dataValue,
				picked  : false
			}
		},
		watch: {
			//是否全选
			'picked': {
				handler: function(newVal) {
					let self = this;
					if(newVal === true){

						let newArr = _.map(self.options,'value');

						this.$set('value',newArr);
					}else{
						this.$set('value',[]);
					}
				}
			},
			'value': {
				handler: function(newVal) {
						this.$emit("on-change",newVal);
				
				}
			}
		}
	}
</script>